<template>
  <div class="info">
    <!-- 购物车的弹窗 新增 修改 -->
    <div v-show="info.isShow" class="content">
      <div class="edit">
        <p>{{ info.type == 1 ? "修改" : "新增" }}商品</p>
        <hr />
        <input type="text" v-model="myData.name" placeholder="名称" />
        <br /><br />
        <input type="text" v-model="myData.price" placeholder="单价" />
        <br /><br />
        <input type="text" v-model.number="myData.num" placeholder="数量" />
        <br /><br /><br /><br />
        <button v-show="info.type == 2" @click="add">新增</button>
        <button v-show="info.type == 1" @click="edit">修改</button>
        <button @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      // 输入框的值
      myData: {},
    };
  },
  methods: {
    setVal(val) {
      // 根据父组件的数据填入输入框并显示
      this.myData = {...val};
    },
    add() {
      // 传给父组件
      this.$emit("add", this.myData);
      // 关闭弹窗
      this.cancel();
    },
    edit() {
      console.log(11, this.myData);
      // 传给父组件
      this.$emit("edit1", this.myData);
      // 关闭弹窗
      this.cancel();
    },
    cancel() {
      // 通知父组件 关闭弹窗
      this.$emit("close");
    },
  },
};
</script>

<style>
.content {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(200, 200, 200, 0.8);
}
.edit {
  width: 500px;
  height: 300px;
  background-color: #fff;
  margin: 100px auto 0;
  border-radius: 10px;
}
</style>